<template>
<div>
    <ul class="mui-table-view">
      <li class="mui-table-view-cell mui-media" v-for="item in newsList" :key="item.id">
        <router-link :to="'/home/newsList/' +item.id ">
          <img class="mui-media-object mui-pull-left" :src=" item.img_url ">
          <div class="mui-media-body">
            <h1 class="news_title">{{ item.title }}</h1>
            <p class='mui-ellipsis'>
              <span>发表时间：{{ item.add_time | dataFormat}}</span>
              <span>点击：{{ item.click }}次</span>
            </p>
          </div>
        </router-link>
      </li>

    </ul>

</div>
</template>
<style lang="scss" scoped>
    .mui-media-body {
        .news_title {
            font-size: 14px;
        }
        .mui-ellipsis {
            font-size: 12px;
        }
        .mui-ellipsis {
            color: rgb(91, 168, 14);
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                newsList: []
            }
        },
        created() {
            this.getnews()
        },
        methods: {
            getnews() {
                //  获取新闻列表接口
                this.axios.get('/api/getnewslist').then(reslult => {
                    // console.log(reslult)
                    // console.log(reslult.data.message[0].title)
                    if (reslult.data.status === 0) {
                        this.newsList = reslult.data.message
                    } else {
                        Toast('图片加载失败')
                    }
                })
            }
        }
    }
</script>